<template>
  <n-cascader
    :value="modelValue"
    :options="dicData"
    :size="option?.size"
    :disabled="option?.disabled"
    :clearable="option?.clearable"
    :multiple="option?.multiple"
    :filterable="option?.filterable"
    :filter="option?.filter"
    :cascade="option?.cascade"
    :check-strategy="option?.checkStrategy"
    :expand-trigger="option?.expandTrigger"
    :max-tag-count="option?.maxTagCount"
    :placement="option?.placement"
    :placeholder="option?.placeholder"
    :separator="option?.separator"
    :show-path="option?.showPath"
    :clear-filter-after-select="option?.clearFilterAfterSelect"
    :render-prefix="option?.renderPrefix"
    :render-label="option?.renderLabel"
    :render-suffix="option?.renderSuffix"
    :on-load="option?.onLoad"
    @blur="option?.onBlur"
    @focus="option?.onFocus"
    @update:value="
      (v, o, p) => (option?.onUpdate?.(v, o, p), $emit('update:modelValue', v, o, p))
    " />
</template>

<script lang="ts" setup>
import { NCascader } from "naive-ui";
import { useDicData } from "./use-dic-data";
import type { CascaderItemOption, CascaderOption } from "../form-item-types";

const props = defineProps<{ modelValue: any; option?: CascaderOption }>();

const { dicData } = useDicData<CascaderItemOption>(props);
</script>
